/****************
 * 子路由公共方法
 ***************/
import { isEqual } from 'lodash' // 对比对象
export default {
    props: { value: {} },
    data() {
        return {
            cache: null,  // 保存初始化表单数据
            // loadingComp: null,  // laoding蒙层
            unFirstWatch: null,  // 第一次监听
            unSecondWatch: null   // 第二次次监听
        }
    },
    created() {
        this.init()
            .then(() => {
                this.unSecondWatch = this.$watch('$parent.form', () => { // 重新监听form变化
                    if (this.isEdited()) {
                        this.$store.commit('SET_URL', this.$router.history.current);
                    }else{
                        this.$store.commit('SET_URL', null);
                    }
                }, {
                    deep: true
                })
            })
    },
    mounted() {
        // dom加载完成后显示loading
        this.$nextTick(() => {
            /*this.loadingComp = this.$loading({ // 开始loading画面
                target: '.ui-nest',
                background: 'rgba(0, 0, 0, .5)'
            });*/
        })

    },
    methods: {
        init() {

            // 先检查表单是否存在
            if (!this.$parent.form) {
                // console.warn('你的data缺少form对象, 请检查你的data数据, 现在我已经帮你建立的一个from对象,帮助联系:QQ:87487312')
                this.$parent.form = {}
                // return false
            }

            // 数据初始化
            let promise = new Promise((resolve, reject) => {
                if (this.$route.meta.formAdd) { // 如果是添加页面
                    this.cache = Object.assign({}, this.$parent.form)  // 否者直接克隆一份
                    setTimeout(() => {  // 因为是在created阶段初始化所以,需要这种方法hack一下
                        // this.loadingComp.close()
                        resolve()
                    })
                }else{
                    this.unFirstWatch = this.$watch('$parent.form', (val) => { // 创建一个可以关闭的监听器
                        this.cache = Object.assign({}, this.$parent.form) // 克隆一份初始化的表单数据
                        // this.loadingComp.close() // 关闭loading画面
                        this.unFirstWatch()  //关闭监听
                        resolve()
                    }, {
                        deep: true
                    })
                }
            })

            // 事件监听
            if (this.prevent) { // 如果存在"拦截"参数才对页面进行保护拦截,防止用户误操作
                window.addEventListener('popstate', this.routeChange)   // 监听路由事件
                window.addEventListener('beforeunload', this.reload)    // 监听刷新事件
            }

            this.$eventHub.$on('closeThis', (v) => {                // 监听点击关闭或返回按钮事件
                this.routeChange(v)
            })

            return promise
        },
        // 点击关闭或返回
        closeThis(v) {
            this.$store.commit('SET_URL', null);
            // 根据传递的关闭事件做出对应的关闭动作
            if (typeof v === 'object') { // 返回到目标位置
                this.$bui.goBack(v)
            }else{ //正常关闭事件
                this.$bui.goBack()
            }
        },
        // 判断当前表单是否被编辑
        isEdited(v) {
            if (v === 'save') { // 当是保存操作时就不做对比
                return false
            }
            // console.log(this.cache, this.$parent.form)
            return !isEqual(this.cache, this.$parent.form)
        },
        // 路由事件
        routeChange(v) {
            this.$router.replace(this.$router.history.current);
            if (this.prevent && this.isEdited(v)) { // 如果存在"拦截"参数才对页面进行保护拦截,防止用户误操作 // 如果数据被被编辑过
                // 弹出对话框
                setTimeout(() => { // 需要用这个方式 setTimeout hack 要不回退操作会拦截不住
                    this.$confirm('当前页面还有未保存的内容，确认要离开吗？', '提示', {
                        type: 'warning'
                    }).then(() => {  //点击确认按钮后
                        this.closeThis(v)
                    }).catch(() => { //点击取消按钮后
                        return false
                    })
                })

            }else{
                this.closeThis(v)
            }
        },
        // 刷新事件
        reload(e) {
            if (!this.isEdited()) { // 没有编辑就不阻止刷新
                return false
            }
            let confirmationMessage = '-_-! 🈚';                        //文本写上去没啥鸟用 这里有说明 https://developer.mozilla.org/zh-CN/docs/Web/Events/beforeunload
            (e || window.event).returnValue = confirmationMessage;     // Gecko and Trident
            return confirmationMessage;                                // Gecko and WebKit
        }
    },
    destroyed() {
        // bye bye 解绑所有监听
        this.$eventHub.$off('closeThis')
        this.unSecondWatch && this.unSecondWatch() // 当表单数据加载完毕就关闭监听
        window.removeEventListener('popstate', this.routeChange);
        window.removeEventListener('beforeunload', this.reload);
    }
}
